<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css实现radio+checkbox标签选项卡</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style: none;
        }

        .brand-u-wrap,
        .lolita-u-wrap {
            height: 400px;
        }

        .brand-u-wrap {
            width: 1000px;
            background-color: #efc;
        }

        .lolita-u-wrap {
            background-color: #cfe;
            position: relative;
            /*width: 1000px;*/
        }

        .lolita-l-wrap {
            background-color: #abc;
        }

        .brand-l-wrap .left-bar,
        .lolita-l-wrap {
            padding-left: 20px;
            line-height: 30px;
            height: 30px;
        }

        .brand-l-wrap .left-bar {
            background-color: #eee;
            /*width: 230px;*/
            border-bottom: #adb 1px solid;
        }

        .lolita-u-wrap {
            display: none;
            position: absolute;
            top: 0;
            left: 230px;
        }

        .brand-u-wrap input:checked ~ .lolita-u-wrap {
            display: block;
        }

        .lolita-l-wrap {
            position: relative;
            height: 30px;
            width: 770px;
            background-color: #adb;
            border-bottom: #234 1px solid;
        }

        .lolita-l-wrap:after {
            clear: both;
        }

        .lolita-l-wrap .lolita-title {
            background-color: #9CCBAB;
            padding: 0 10px;
            margin-left: 2px;
        }

        .lolita-l-wrap ul,
        .lolita-l-wrap li,
        .lolita-l-wrap p {
            float: left;
        }

        .brand-u-wrap label {
            display: inline-block;
            margin-right: 6px;
        }

        .brand-u-wrap label a:link,
        .brand-u-wrap label a:visited,
        .brand-u-wrap label a:hover,
        .brand-u-wrap label a:hover,
        .brand-u-wrap label a {
            color: #000;
        }

        .brand-u-wrap input[type=radio],
        .brand-u-wrap input[type=checkbox] {
            width: 0;
            height: 0;
        }

        label.brand-mask-show,
        label.lolita-mask-show {
            position: absolute;
            margin-top: 8px;
            margin-left: -20px;
            width: 12px;
            height: 12px;
            background-color: #fff;
            border-radius: 3px;
            border: 1.5px solid #8dc61e;
            transform: scale(1.005);
        }

        .brand-u-wrap input ~ label.brand-mask-show-selected-core,
        .brand-u-wrap input ~ label.lolita-mask-show-selected-core {
            position: absolute; /*脱离文档流,以免对后边的Dom元素位置造成影响*/
            background-color: #8dc61e;
        }

        .brand-u-wrap input:checked ~ label.brand-mask-show-selected-core,
        .brand-u-wrap input:checked ~ label.lolita-mask-show-selected-core {
            margin-left: -16px;
            margin-top: 12px;
            width: 7px;
            height: 7px;
        }

        .spliter {
            /*hegith: */
        }
    </style>

</head>
<body>
<ul class="brand-u-wrap">
    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate1" name="cate" value="cate1" checked="true">
            <label for="cate1" class="brand-mask-show"></label>
            <label for="cate1" class="brand-mask-show-selected-core"></label>
            <label for="cate1">cate1</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-1">
                    <label for="cate1-1" class="lolita-mask-show"></label>
                    <label for="cate1-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-1">cate1-1</label>
                    <label for="cate1-1">cate1-1-1</label>
                    <label for="cate1-1">cate1-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-2">
                    <label for="cate1-2" class="lolita-mask-show"></label>
                    <label for="cate1-2" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-2">cate1-2</label>
                    <label for="cate1-2">cate1-2-1</label>
                    <label for="cate1-2">cate1-2-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-3">
                    <label for="cate1-3" class="lolita-mask-show"></label>
                    <label for="cate1-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-3">cate1-3</label>
                    <label for="cate1-3">cate1-3-1</label>
                    <label for="cate1-3">cate1-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-4">
                    <label for="cate1-4" class="lolita-mask-show"></label>
                    <label for="cate1-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-4">cate1-4</label>
                    <label for="cate1-4">cate1-4-1</label>
                    <label for="cate1-4">cate1-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-5">
                    <label for="cate1-5" class="lolita-mask-show"></label>
                    <label for="cate1-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-5">cate1-5</label>
                    <label for="cate1-5">cate1-5-1</label>
                    <label for="cate1-5">cate1-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate1" id="cate1-6">
                    <label for="cate1-6" class="lolita-mask-show"></label>
                    <label for="cate1-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate1-6">cate1-6</label>
                    <label for="cate1-6">cate1-6-1</label>
                    <label for="cate1-6">cate1-6-2</label>
                </li>
            </ul>
        </div>
    </li>

    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate2" name="cate" value="cate2">
            <label for="cate2" class="brand-mask-show"></label>
            <label for="cate2" class="brand-mask-show-selected-core"></label>
            <label for="cate2">cate2</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-1">
                    <label for="cate2-1" class="lolita-mask-show"></label>
                    <label for="cate2-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate2-2"><span>cate2-1</span></label>
                    <label for="cate2-2">cate2-1-1</label>
                    <label for="cate2-2">cate2-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-2">
                    <label for="cate2-2" class="lolita-mask-show"></label>
                    <label for="cate2-2" class="lolita-mask-show-selected-core"></label>
                    <!--当前css样式下只能在label标签中嵌套行内原生的inline或inline-block的元素, 如需嵌入inline-block和block元素需要解决.lolita-l-wrap内的.lolita-mask-show不正常累加向下偏移的css问题, 然而我当前的需求不需要解决这个问题所以就不折腾了-->
                    <label class="lolita-title" for="cate2-2"><span>cate2-2</span></label>
                    <label for="cate2-2"><span>cate2-2-1</span></label>
                    <label for="cate2-2"><a href="###" style="text-underline: #aaddbb">cate2-2-2</a></label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-3">
                    <label for="cate2-3" class="lolita-mask-show"></label>
                    <label for="cate2-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate2-2"><span>cate2-3</span></label>
                    <label for="cate2-2">cate2-3-1</label>
                    <label for="cate2-2">cate2-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-4">
                    <label for="cate2-4" class="lolita-mask-show"></label>
                    <label for="cate2-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate2-2"><span>cate2-4</span></label>
                    <label for="cate2-2">cate2-4-1</label>
                    <label for="cate2-2">cate2-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-5">
                    <label for="cate2-5" class="lolita-mask-show"></label>
                    <label for="cate2-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate2-2"><span>cate2-5</span></label>
                    <label for="cate2-2">cate2-5-1</label>
                    <label for="cate2-2">cate2-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate2" id="cate2-6">
                    <label for="cate2-6" class="lolita-mask-show"></label>
                    <label for="cate2-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate2-2"><span>cate2-6</span></label>
                    <label for="cate2-2">cate2-6-1</label>
                    <label for="cate2-2">cate2-6-2</label>
                </li>
            </ul>
        </div>
    </li>

    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate3" name="cate" value="cate3">
            <label for="cate3" class="brand-mask-show"></label>
            <label for="cate3" class="brand-mask-show-selected-core"></label>
            <label for="cate3">cate3</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-1">
                    <label for="cate3-1" class="lolita-mask-show"></label>
                    <label for="cate3-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate3-2"><span>cate3-1</span></label>
                    <label for="cate3-2">cate3-1-1</label>
                    <label for="cate3-2">cate3-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-2">
                    <label for="cate3-2" class="lolita-mask-show"></label>
                    <label for="cate3-2" class="lolita-mask-show-selected-core"></label>
                    <!--当前css样式下只能在label标签中嵌套行内原生的inline或inline-block的元素, 如需嵌入inline-block和block元素需要解决.lolita-l-wrap内的.lolita-mask-show不正常累加向下偏移的css问题, 然而我当前的需求不需要解决这个问题所以就不折腾了-->
                    <label class="lolita-title" for="cate3-2"><span>cate3-2</span></label>
                    <label for="cate3-2"><span>cate3-2-1</span></label>
                    <label for="cate3-2"><a href="###" style="text-underline: #aaddbb">cate3-2-2</a></label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-3">
                    <label for="cate3-3" class="lolita-mask-show"></label>
                    <label for="cate3-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate3-2"><span>cate3-3</span></label>
                    <label for="cate3-2">cate3-3-1</label>
                    <label for="cate3-2">cate3-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-4">
                    <label for="cate3-4" class="lolita-mask-show"></label>
                    <label for="cate3-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate3-2"><span>cate3-4</span></label>
                    <label for="cate3-2">cate3-4-1</label>
                    <label for="cate3-2">cate3-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-5">
                    <label for="cate3-5" class="lolita-mask-show"></label>
                    <label for="cate3-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate3-2"><span>cate3-5</span></label>
                    <label for="cate3-2">cate3-5-1</label>
                    <label for="cate3-2">cate3-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate3" id="cate3-6">
                    <label for="cate3-6" class="lolita-mask-show"></label>
                    <label for="cate3-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate3-2"><span>cate3-6</span></label>
                    <label for="cate3-2">cate3-6-1</label>
                    <label for="cate3-2">cate3-6-2</label>
                </li>
            </ul>
        </div>
    </li>

    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate4" name="cate" value="cate4">
            <label for="cate4" class="brand-mask-show"></label>
            <label for="cate4" class="brand-mask-show-selected-core"></label>
            <label for="cate4">cate4</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-1">
                    <label for="cate4-1" class="lolita-mask-show"></label>
                    <label for="cate4-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate4-2"><span>cate4-1</span></label>
                    <label for="cate4-2">cate4-1-1</label>
                    <label for="cate4-2">cate4-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-2">
                    <label for="cate4-2" class="lolita-mask-show"></label>
                    <label for="cate4-2" class="lolita-mask-show-selected-core"></label>
                    <!--当前css样式下只能在label标签中嵌套行内原生的inline或inline-block的元素, 如需嵌入inline-block和block元素需要解决.lolita-l-wrap内的.lolita-mask-show不正常累加向下偏移的css问题, 然而我当前的需求不需要解决这个问题所以就不折腾了-->
                    <label class="lolita-title" for="cate4-2"><span>cate4-2</span></label>
                    <label for="cate4-2"><span>cate4-2-1</span></label>
                    <label for="cate4-2"><a href="###" style="text-underline: #aaddbb">cate4-2-2</a></label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-3">
                    <label for="cate4-3" class="lolita-mask-show"></label>
                    <label for="cate4-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate4-2"><span>cate4-3</span></label>
                    <label for="cate4-2">cate4-3-1</label>
                    <label for="cate4-2">cate4-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-4">
                    <label for="cate4-4" class="lolita-mask-show"></label>
                    <label for="cate4-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate4-2"><span>cate4-4</span></label>
                    <label for="cate4-2">cate4-4-1</label>
                    <label for="cate4-2">cate4-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-5">
                    <label for="cate4-5" class="lolita-mask-show"></label>
                    <label for="cate4-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate4-2"><span>cate4-5</span></label>
                    <label for="cate4-2">cate4-5-1</label>
                    <label for="cate4-2">cate4-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate4" id="cate4-6">
                    <label for="cate4-6" class="lolita-mask-show"></label>
                    <label for="cate4-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate4-2"><span>cate4-6</span></label>
                    <label for="cate4-2">cate4-6-1</label>
                    <label for="cate4-2">cate4-6-2</label>
                </li>
            </ul>
        </div>
    </li>

    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate5" name="cate" value="cate5">
            <label for="cate5" class="brand-mask-show"></label>
            <label for="cate5" class="brand-mask-show-selected-core"></label>
            <label for="cate5">cate5</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-1">
                    <label for="cate5-1" class="lolita-mask-show"></label>
                    <label for="cate5-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate5-2"><span>cate5-1</span></label>
                    <label for="cate5-2">cate5-1-1</label>
                    <label for="cate5-2">cate5-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-2">
                    <label for="cate5-2" class="lolita-mask-show"></label>
                    <label for="cate5-2" class="lolita-mask-show-selected-core"></label>
                    <!--当前css样式下只能在label标签中嵌套行内原生的inline或inline-block的元素, 如需嵌入inline-block和block元素需要解决.lolita-l-wrap内的.lolita-mask-show不正常累加向下偏移的css问题, 然而我当前的需求不需要解决这个问题所以就不折腾了-->
                    <label class="lolita-title" for="cate5-2"><span>cate5-2</span></label>
                    <label for="cate5-2"><span>cate5-2-1</span></label>
                    <label for="cate5-2"><a href="###" style="text-underline: #aaddbb">cate5-2-2</a></label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-3">
                    <label for="cate5-3" class="lolita-mask-show"></label>
                    <label for="cate5-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate5-2"><span>cate5-3</span></label>
                    <label for="cate5-2">cate5-3-1</label>
                    <label for="cate5-2">cate5-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-4">
                    <label for="cate5-4" class="lolita-mask-show"></label>
                    <label for="cate5-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate5-2"><span>cate5-4</span></label>
                    <label for="cate5-2">cate5-4-1</label>
                    <label for="cate5-2">cate5-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-5">
                    <label for="cate5-5" class="lolita-mask-show"></label>
                    <label for="cate5-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate5-2"><span>cate5-5</span></label>
                    <label for="cate5-2">cate5-5-1</label>
                    <label for="cate5-2">cate5-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate5" id="cate5-6">
                    <label for="cate5-6" class="lolita-mask-show"></label>
                    <label for="cate5-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate5-2"><span>cate5-6</span></label>
                    <label for="cate5-2">cate5-6-1</label>
                    <label for="cate5-2">cate5-6-2</label>
                </li>
            </ul>
        </div>
    </li>


    <li class="brand-l-wrap">
        <div class="left-bar">
            <input type="radio" id="cate6" name="cate" value="cate6">
            <label for="cate6" class="brand-mask-show"></label>
            <label for="cate6" class="brand-mask-show-selected-core"></label>
            <label for="cate6">cate6</label>

            <ul class="lolita-u-wrap">
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-1">
                    <label for="cate6-1" class="lolita-mask-show"></label>
                    <label for="cate6-1" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate6-2"><span>cate6-1</span></label>
                    <label for="cate6-2">cate6-1-1</label>
                    <label for="cate6-2">cate6-1-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-2">
                    <label for="cate6-2" class="lolita-mask-show"></label>
                    <label for="cate6-2" class="lolita-mask-show-selected-core"></label>
                    <!--当前css样式下只能在label标签中嵌套行内原生的inline或inline-block的元素, 如需嵌入inline-block和block元素需要解决.lolita-l-wrap内的.lolita-mask-show不正常累加向下偏移的css问题, 然而我当前的需求不需要解决这个问题所以就不折腾了-->
                    <label class="lolita-title" for="cate6-2"><span>cate6-2</span></label>
                    <label for="cate6-2"><span>cate6-2-1</span></label>
                    <label for="cate6-2"><a href="###" style="text-underline: #aaddbb">cate6-2-2</a></label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-3">
                    <label for="cate6-3" class="lolita-mask-show"></label>
                    <label for="cate6-3" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate6-2"><span>cate6-3</span></label>
                    <label for="cate6-2">cate6-3-1</label>
                    <label for="cate6-2">cate6-3-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-4">
                    <label for="cate6-4" class="lolita-mask-show"></label>
                    <label for="cate6-4" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate6-2"><span>cate6-4</span></label>
                    <label for="cate6-2">cate6-4-1</label>
                    <label for="cate6-2">cate6-4-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-5">
                    <label for="cate6-5" class="lolita-mask-show"></label>
                    <label for="cate6-5" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate6-2"><span>cate6-5</span></label>
                    <label for="cate6-2">cate6-5-1</label>
                    <label for="cate6-2">cate6-5-2</label>
                </li>
                <li class="lolita-l-wrap">
                    <input type="checkbox" name="cate6" id="cate6-6">
                    <label for="cate6-6" class="lolita-mask-show"></label>
                    <label for="cate6-6" class="lolita-mask-show-selected-core"></label>
                    <label class="lolita-title" for="cate6-2"><span>cate6-6</span></label>
                    <label for="cate6-2">cate6-6-1</label>
                    <label for="cate6-2">cate6-6-2</label>
                </li>
            </ul>
        </div>
    </li>

</ul>
</body>
</html>